<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
        </tr>
    </table>

    <script>
        const arr = [
            {title:"小米手机",price:1999,num:10},
            {title:"华为手机",price:2999,num:12},
            {title:"苹果手机",price:3999,num:34},
            {title:"三星手机",price:4999,num:133},
            {title:"oppo手机",price:5999,num:155},
        ]
        let tableE = document.querySelector('table');

        for (let i = 0;i<arr.length;i++){
            let trE = document.createElement('tr');
            let titleTd = document.createElement('td');
            let priceTd = document.createElement('td');
            let numTd = document.createElement('td');
            titleTd.innerHTML = arr[i].title;
            priceTd.innerHTML = arr[i].price;
            numTd.innerHTML = arr[i].num;
            trE.append(titleTd,priceTd,numTd);
            tableE.append(trE);
        }


    </script>

</body>
</html>